---
name: useVirtualList
route: /useVirtualList
menu: 'UI'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

# useVirtualList

A hook that allows you to use virtual list to render huge chunks of list data.

## Examples

### Default usage

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='Default usage' description='render 100,000 items in a list'>
  <Demo1 />
</JackBox>

### Dynamic item height

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='Dynamic item height' description='specify item height dynamically'>
  <Demo2 />
</JackBox>

## API

```typescript
const result:Result = useVirtualList(originalList: any[], Options);
```

### Result

| Property | Description                                         | Type                 |
|----------|------------------------------------------|------------|
| list  | The current portion of data need to be rendered to DOM        | {data: T, index: number}[]    |
| containerProps     | the props of outter container                          | {}        |
| wrapperProps | the props of inner wrapper   | {} |
| scrollTo    | scroll to specific index                         | (index: number) => void        |

### Params

| Property | Description                                                        | Type                   | Default |
|---------|----------------------------------------------|------------------------|--------|
| originalList | The original list that contains a lot of data entries | T[] | []      |
| options | Optional configuration item, see Options                       | -                      | -      |


### Options

| Property | Description       | Type   | Default |
|------|--------------|--------|--------|
| itemHeight | item height, accept a pixel value or a function that returns the height  | number \| ((index: number) => number) | -    |
| overscan | the extra buffer items outside of the view area | number | 10    |